<template>
	<div class="investigatestyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>

		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">导航样式</div>
					<el-form label-width="100px">
						<el-form-item label="选择样式">
							<el-radio-group v-model="datas.mode">
								<el-radio :label="1"> 正常列表</el-radio>
								<el-radio :label="2">中间突出</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="中间突出背景" v-if="datas.mode == 2">
							<el-input v-model="datas.midBgColor">
								<template #prepend>
									<el-color-picker v-model="datas.midBgColor" />
								</template>
							</el-input>
						</el-form-item>

						<el-form-item label="导航风格">
							<el-radio-group v-model="datas.layout">
								<el-radio :label="1" size="small">文字+图片</el-radio>
								<el-radio :label="2" size="small">文字</el-radio>
								<el-radio :label="3" size="small">图片</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="默认颜色">
							<el-input v-model="datas.inactiveColor">
								<template #prepend>
									<el-color-picker v-model="datas.inactiveColor" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="选中颜色">
							<el-input v-model="datas.activeColor">
								<template #prepend>
									<el-color-picker v-model="datas.activeColor" />
								</template>
							</el-input>
						</el-form-item>

						<div class="title">图标设置</div>
						<vuedraggable :list="datas.list" item-key="index" :forceFallback="true" :animation="200">
							<template #item="{ element, index }">
								<section class="imgBanner">
									<van-icon class="el-icon-circle-close" name="close" @click="deleteTab(index)" />
									<el-form-item label="默认图片">
										<div class="sd-flex">
											<div class="choice-image choice-image-delete" @click="openChoiceImage(index, 0)">
												<el-image v-if="element.inactiveIcon != ''" :src="STATIC_URL + element.inactiveIcon" fit="cover" />
												<el-icon v-else>
													<ele-Plus />
												</el-icon>

												<div class="delete-content" @click.stop="element.inactiveIcon = ''" v-if="element.inactiveIcon != ''">
													<SvgIcon name="ele-DeleteFilled"></SvgIcon>
												</div>
											</div>
											<div class="ml10 tip">建议尺寸: 44*44</div>
										</div>
									</el-form-item>
									<el-form-item label="选中图片">
										<div class="sd-flex">
											<div class="choice-image choice-image-delete" @click="openChoiceImage(index, 1)">
												<el-image v-if="element.activeIcon != ''" :src="STATIC_URL + element.activeIcon" fit="cover" />
												<el-icon v-else>
													<ele-Plus />
												</el-icon>

												<div class="delete-content" @click.stop="element.activeIcon = ''" v-if="element.activeIcon != ''">
													<SvgIcon name="ele-DeleteFilled"></SvgIcon>
												</div>
											</div>
											<div class="ml10 tip">建议尺寸: 44*44</div>
										</div>
									</el-form-item>
									<el-form-item label="文字">
										<el-input v-model="element.text"></el-input>
									</el-form-item>
									<el-form-item label="选择链接">
										<el-input v-model="element.url">
											<template #append>
												<el-button class="ml5 mr5" @click.prevent="openChoiceData(index)">选择</el-button>
											</template>
										</el-input>
									</el-form-item>
								</section>
							</template>
						</vuedraggable>

						<!-- 添加导航按钮 -->
						<el-button @click="addTab"> 添加导航</el-button>
					</el-form>
				</div>
			</el-tab-pane>

			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>

		<!-- 表单 -->

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup name="tabBarStyle">
import vuedraggable from 'vuedraggable'; //拖拽组件
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));
const PageDataRef = ref();

const props = defineProps({
	datas: {},
});

let choicePageIndex = 0;
const openChoiceData = (index) => {
	console.log('点击选择连接.....');
	PageDataRef.value.openDialog();
	choicePageIndex = index;
};

const choicePage = (res) => {
	console.log('choice page res: ', res);
	props.datas.list[choicePageIndex].url = res.urlContent;
};

let choiceImageIndex = 0;
let choiceImageType = 0;
const openChoiceImage = (index, type) => {
	choiceImageIndex = index;
	choiceImageType = type;
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFile = (res) => {
	if (choiceImageType == 1) {
		props.datas.list[choiceImageIndex].activeIcon = res[0].visitRelativePath;
	} else {
		props.datas.list[choiceImageIndex].inactiveIcon = res[0].visitRelativePath;
	}
};

const deleteTab = (index) => {
	props.datas.list.splice(index, 1);
};

const addTab = () => {
	props.datas.list.push({
		inactiveIcon: '',
		activeIcon: '',
		text: '',
		url: '',
	});
};
</script>

<style lang="scss" scoped>
.investigatestyle {
	width: 100%;
	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}

	/* 卡片列表 */
	.imgBanner {
		padding: 6px 12px;
		margin: 16px 7px;
		border-radius: 2px;
		background-color: #fff;
		box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
		position: relative;

		&:hover {
			.el-icon-circle-close {
				display: block;
			}
		}

		/* 删除图标 */
		.el-icon-circle-close {
			position: absolute;
			right: -5px;
			top: -10px;
			cursor: pointer;
			font-size: 19px;
			display: none;
		}
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}

	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
